<template>
  <div class="icon-boxs">
    <i
      v-if="store.styleInfo.styleType == 1"
      class="iconfonts"
      :style="{
        fontSize: props.iconSize,
        color: props.color ? props.color : colorList5[store.styleInfo.colorType - 1].buttonColor,
      }"
    >
      &#xe656;
    </i>
    <i
      v-if="store.styleInfo.styleType == 2"
      class="iconfonts"
      :style="{
        fontSize: props.iconSize,
        color: props.color ? props.color : colorList5[store.styleInfo.colorType - 1].buttonColor,
      }"
    >
      &#xe660;
    </i>
    <i
      v-if="store.styleInfo.styleType == 3"
      class="iconfonts"
      :style="{
        fontSize: props.iconSize,
        color: props.color ? props.color : colorList5[store.styleInfo.colorType - 1].buttonColor,
      }"
    >
      &#xe666;
    </i>
  </div>
</template>

<script setup lang="ts">
import { colorList5 } from '../../data';
import { useProjectStore } from '@/store';
const store = useProjectStore();
const props = defineProps({
  iconSize: {
    type: String,
    default: '22px',
  },
  color: {
    type: String,
  },
  // 数据
});
</script>

<style lang="less" scoped>
.icon-boxs {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
</style>
